<!--<template>
  <div class="advert_main">
    <m-header modile-title="广告轮播" go-back="true"></m-header>
    <div class="scroll-wrap">
      <ul class="scroll-content" :style="{ top }">
        <li v-for="item in prizeList">{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
  .advert_main {
    .scroll-wrap {
      width: 100%;
      height: 50px;
      border: 1px solid #f2f2f2;
      overflow: hidden;
      .scroll-content {
        position: relative;
        transition: top 0.5s;
        li {
          line-height: 50px;
          text-align: center;
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../components/header'

  export default {
    data() {
      return {
        prizeList: [
          {name: '但愿我和你是一首唱不完的歌'},
          {name: '人这一辈子，最怕突然听懂了一首歌'},
          {name: '有些歌一听就是一辈子'},
          {name: '喂，你最爱听的一首歌是什么'},
          {name: '只有到了最后，才能听出歌的真谛'}
        ],
        activeIndex: 0
      }
    },
    computed: {
      top() {
        return -this.activeIndex * 50 + 'px';
      }
    },
    created() {
    },
    mounted() {
      setInterval(() => {
        if (this.activeIndex < this.prizeList.length) {
          this.activeIndex += 1;
        } else {
          this.activeIndex = 0;
        }
      }, 1000);
    },
    methods: {},
    components: {
      mHeader
    }
  }
</script>-->
<template>
  <div class="adver_mian">
    <m-header modile-title="广告轮播" go-back="true"></m-header>
    <div class="big_box">
      <div class="title">
        <span>最新资讯</span>
      </div>
      <div class="box">
        <ul class="con1" ref="con1" :class="{anim:animate==true}">
          <li v-for='item in items'>{{item.name + item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import mHeader from '../../../components/header'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        animate: false,
        items: [  //消息列表对应的数组
          {name: "马云"},
          {name: "雷军"},
          {name: "王勤"},
          {name: "马云1"},
          {name: "雷军1"},
          {name: "王勤1"},
          {name: "马云2"},
          {name: "雷军2"},
          {name: "王勤2"},
        ],
        page: [1, 2, 3, 4, 5]
      }
    },
    created() {
      setInterval(this.scroll, 1000)
    },
    methods: {
      scroll() {
        this.animate = true
        setTimeout(() => {
          this.items.push(this.items[0]);
          this.items.shift();
          this.animate = false;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 1500)
      }
    },
    components: {
      mHeader
    }
  }
</script>
<style lang="scss" scoped>
  .adver_mian {
    width: 100%;
    .big_box {
      width: 100%;
      height: 36px;
      border-bottom: 3px solid #cccccc;
      .title {
        width: 100px;
        height: 33px;
        float: left;
        span{
          font-size: 20px;
          font-family: 华文行楷;
          line-height: 36px;
          text-align: center;
          color: orangered;
        }
      }
      .box {
        width: 300px;
        height: 36px;
        line-height: 30px;
        overflow: hidden;
        padding-left: 30px;
        transition: all 0.5s;
        float: right;
        .con1 li {
          list-style: none;
          line-height: 34px;
          height: 34px;
        }
        .anim {
          transition: all 1.5s;
          margin-top: -34px;
        }
      }
    }
  }


</style>
